<template>
  <div class="detail" style="border: 0px solid red">

    <div class="container" style="float: left">

    </div>
    <!-- 正文 -->
    <div class="zhengwen">
      <h1>中国石化油气成藏重点实验室</h1>
      <div class="first">
        <span class="third">(2021.10.17修改版)</span>
        <span>发布时间：2020-5-20 13:30</span>
      </div>
      <div class="xh" style="width: 900px; margin-left: -50px"></div>
      <div
        class="second"
        style="border: 0px solid red; width: 900px; margin-left: -50px"
      >
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in list">
            <el-row :gutter="5" type="align">
              <el-col :span="24">
                <div class="grid-content bg-purple" style="background: #ffffff">
                  <img
                    :src="item.expImageUrl"
                    style="height: 350px; width: 100%; border-radius: 5px"
                  /></div
              ></el-col>
              <el-col :span="24">
                <div
                  class="grid-content bg-purple"
                  style="
                    text-align: center;
                    height: 20px;
                    line-height: 30px;
                    background: #ffffff;
                  "
                >
                  {{item.expName}} {{item.expAcademicDegree}}
                </div>
              </el-col>
              <el-col :span="24">
                <div
                  class="grid-content bg-purple"
                  style="text-align: center; height: 50px; background: #ffffff"
                >
                  现任{{item.expGraduationSchool}} {{item.expAcademicDegree}}
                </div>
              </el-col>
            </el-row>
          </el-col>

        </el-row>

      </div>
    </div>
  </div>
</template>
<script>
import { expertlist } from "@/api/api.js";
export default {
  data(){
    return {
list:[]
    }
  },
  created() {
    expertlist().then((res) => {
      console.log(res);
      if(res.code==200){
this.list = res.rows
      }
    });
  },
  methods: {
    Gohome() {
      this.$router.push("home");
    },
  },
};
</script>
<style lang="less" scoped>
.detail {
  width: 100%;
  margin: 0 auto;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.title-tab {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 54px;
  cursor: pointer;
}
.red {
  color: red;
}
.zhengwen {
  width: 100%;
  background-color: white;
  padding: 60px;
  box-sizing: border-box;
}
p {
  text-indent: 2em;
  font-size: 16px;
  color: #333333;
  margin-top: 20px;
}
p:nth-child(1) {
  text-indent: 0;
}
h1 {
  text-align: center;
  font-size: 28px;
  color: #333333;
}
.first {
  text-align: center;
  font-size: 16px;
  color: #999999;
  margin-top: 28px;
  margin-bottom: 30px;
}
.daohang {
  margin: 20px 0;
}
.third {
  margin-right: 20px;
}
.jianjiebanner {
  background: url(../../../assets/image/shiyanshijianjie.png);
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  font-size: 14px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
